<template>
    <div>
        <van-nav-bar title="城市列表" left-arrow @click-left="onClickLeft" />
        <div>
            <van-index-bar :index-list="ArrList" v-for="(obj,key,index) in newObj" :key="index"
            :sticky="false" highlight-color="#21b97a">
                <van-index-anchor :index="key"><span>{{key}}</span></van-index-anchor>
                <van-cell v-for="(item,index) in obj" :key="index" :title="item" />
            </van-index-bar>
        </div>
    </div>
</template>

<script>
import { cityListApi, hotCityApi } from '@/api'
export default {
    created() {
        this.cityList()
        this.hotcity()
    },
    data() {
        return {
            hotCityList: [],
            citylist: [],
            ArrList: ['#', "热", "A", "B", "C", "D", "F", "G", "H", "J", "K", "L", "M", "N", "Q", "S", "T", "W", "X", "Y", "Z"],
            newObj: {},
        };
    },
    methods: {
        async cityList() {
            const { data } = await cityListApi()
            //   console.log(data)
            this.citylist = data.body
            this.changeList()
        },
        //返回上一级
        onClickLeft() {
            window.history.go(-1)
        },
        async hotcity() {
            const { data } = await hotCityApi()
            //console.log(data)
            this.hotCityList = data.body
        },
        //渲染数据
        changeList() {
            this.ArrList.forEach(item => {
                let that = item
                this.citylist.forEach(item => {
                    if (item.pinyin.slice(0, 1).toUpperCase() === that) {
                        if (!this.newObj[that]) {
                            this.$set(this.newObj, that, [item.label])
                        } else {
                            this.newObj[that].push(item.label)
                        }
                    }
                })
            })
        }
    },

};

</script>

<style lang="less" scoped>
.van-nav-bar {
    background-color: #21b97a;
}

:deep(.van-nav-bar__title) {
    color: #fff;
    font-size: 38px;
}

:deep(.van-icon-arrow-left) {
    color: #fff;
}

.van-index-bar__index {
    font-size: 32px;
}
</style>